<template>
  <div class="app-customer-details">

    <div class="module-header">
      庄港发
    </div>
    <mt-cell title="客商类型" :value="post.customerType" readonly="readonly" is-link @click.native="handleSelectTest"></mt-cell>
    <mt-cell title="客商性质" :value="post.customerNature" readonly="readonly" is-link @click.native="handleSelectTest"></mt-cell>

    <div class="module-info">
      <mt-field label="手机号" placeholder="" readonly="readonly" v-model="post.phone"></mt-field>
      <mt-field label="地址" placeholder="" readonly="readonly" v-model="post.address"></mt-field>
    </div>

    <div class="module-other">
      <mt-field label="期初应收款" readonly="readonly" placeholder="请输入期初应收款" v-model="post.money"></mt-field>
    </div>

    <div class="module-note">
      <span class="note-title">备注信息</span>
      <textarea v-model="post.comments" readonly="readonly" class="note-textarea" placeholder="请输入备注信息" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>
    </div>

    <div class="button-content">
      <div class="button-block">
        <mt-button type="default" @click="handleDelete">删除</mt-button>
      </div>
      <div class="button-block">
        <mt-button type="primary" @click="handleEdit">编辑</mt-button>
      </div>
    </div>
  </div>
</template>

<script>

  import {MessageBox} from 'mint-ui'
  export default {
    props:{
      title:String,
    },
    data(){
      return{
        post:{
          customerType:'客户',
          customerNature:'月结客户',
          phone:'13726221444',
          address:'广东省广州市白云区',
          money:'100',
          comments:'客户需要月结',
        }
      }
    },
    methods:{
      handleDelete(){
          MessageBox({
            title: '',
            message: '是否确认删除此客商?',
            showCancelButton: true
          }).then(action => {
            if(action=='confirm'){

        }
        });

      },
      handleEdit(){

      },

    }
  }
</script>
<style>
  .module-header{
    background: #f5f5f5;
    padding:24px 0;
    text-align: center;
    font-size: 28px;
  }
  .app-customer-details .module-note{
    background: #fff;
    display: flex;
    padding:12px;
  }
  .app-customer-details .module-note .note-title{
    font-size: 16px;
    width: 105px;
  }
  .app-customer-details .module-note .note-textarea{
    width: 70%;
    height:80px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    outline: 0;
    padding:0 10px;
    font-size: 16px;
    text-align: right;
  }
  .app-customer-details .button-content{
    display: flex;
    padding:24px 12px;
  }
  .app-customer-details .button-block{
    width: 50%;
    padding: 0 12px;
  }
  .app-customer-details .button-block .mint-button{
    width: 100%;
  }
  .app-customer-details .button-block .mint-button--primary{
    background:#007EE5;
  }
  .app-customer-details .module-info .mint-field-core{
    text-align: right;
    padding-right: 10px;
  }
  .app-customer-details .module-other .mint-field-core{
    text-align: right;
    padding-right: 10px;
  }
</style>
